<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 用了一个行列布局 -->
        <TreeTools :data="company" :is-root="true" />
        <hr>
        <!-- 以下是树形结构 -->
        <el-tree
          :data="departs"
          :props="defaultProps"
          :default-expand-all="true"
        >
          <!-- 这里是插槽, 每个树形节点都会渲染出一行 -->
          <!-- 利用作用域插槽的方式, 获取内部的每个节点数据 -->
          <!-- 拿到了 scope 以后,当前节点的数据就在 scope.data 当中 -->
          <TreeTools
            slot-scope="{ data }"
            :data="data"
            @addDepts="addDepts"
            @editDepts="editDepts"
            @delDepts="loadPage"
          />
        </el-tree>
      </el-card>
    </div>
    <!-- 如果子组件的自定义事件是
    update:字段名,
    在父组件就可以给这个字段带上一个
    .sync 修饰符, 代表可以边盖数据 -->
    <AddDept
      ref="deptDialog"
      :show-dialog.sync="showDialog"
      :data="node"
      @addDepts="loadPage"
    />
  </div>
</template>

<script>
import AddDept from './components/add-dept'
import TreeTools from './components/tree-tools'
import { getDepartments } from '@/api/departments'
import { convertTreeData } from '@/utils'
export default {
  components: {
    TreeTools,
    AddDept
  },
  data() {
    return {
      showDialog: false,
      departs: [],
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      company: {
        node: {}
      }
    }
  },
  created() {
    this.loadPage()
  },
  methods: {
    loadPage() {
      getDepartments().then((res) => {
        console.log(res)
        // 拿了数据之后，company不能再为空，将company赋值
        this.company = {
          name: res.companyNames,
          manager: '负责人',
          // 给公司添加一个空的id：
          id: ''
        }
        // this.departs = res.depts  不能直接将扁平的数据直接传入组件，要将数据转换为树状格式：
        // 这里是引入了convertTreeData 这个转换函数：参数为：list、数组；和一个空的pid   在函数前不用this，那是代表直接用引进的函数，不是mothods中的
        this.departs = convertTreeData(res.depts, '')
      })
    },
    addDepts(node) {
      // 这里是属性组件点击增加子部门时的函数
      // 1. 弹出弹窗
      this.showDialog = true
      // 将子部门的数据存起来备用：
      this.node = node
    },
    editDepts(node) {
      this.showDialog = true
      this.node = node
      // 编辑时除了弹窗和记录数据
      // 还得通知子组件回显数据
      this.$nextTick(() => {
        this.$refs.deptDialog.getDepartmentDetails()
      })
    }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>
